<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Orun 快乐跑 - 让奔跑更有趣</title>
	<link rel="stylesheet" type="text/css" href="statics/css/lib/swiper.min.css"/>
	<link rel="stylesheet" type="text/css" href="statics/css/lib/animate.css"/>
    <link href="statics/css/orun3/global.css" rel="stylesheet"/>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="statics/js/orun_index/orun3_global.js"></script>
  </head>
  <body>
  	<div id="head">
  		<nav class="navbar flex-row space-bet nav">
		    <div class="navbar-header">
		       	<a class="navbar-brand" href="#"></a>
		    </div>
		    <div class="navbar-collapse collapse">         
		        <ul class="navbar-nav flex-row space-bet">
		            <li class="navItem">
		            	<a href="orun3_index.html">首页</a>
		            </li>
		            <li class="navItem">
		            	<a href="orun3_download.html">APP下载</a>
		            </li>
		            <li  class="navItem navItem-wx">
		            	<a href="javascript:;">微信</a>
		            	<img class="nav-wx" src="statics/images/orun3/qr_nav.png" />
		            </li>
		            <li  class="navItem">
		            	<a href="orun3_aboutUs.html">关于我们</a>
		            </li>
		        </ul>
		    </div><!--/.nav-collapse -->
			</nav>
  	</div>
    <div class="container">
    	<div class="" >
    		<div class="index_swiperBox">
    			<div class="swiper-container swiper-ban">
				    <div class="swiper-wrapper">
				      <div class="swiper-slide">
				      	<img src="statics/images/orun3/swiper1.png" />
				      </div>
				      <div class="swiper-slide">
				      	<img src="statics/images/orun3/swiper2.png" />
				      </div>
				      <div class="swiper-slide">
				      	<img src="statics/images/orun3/swiper3.png" />
				      </div>
				    </div>
				  </div>
				  <div class="banOpa">
				  	<div class="banOpaCon">
				  		<img class="index_slogan" src="statics/images/orun3/slogan.png"/>
				  		<div class="index_downBtns flex-row space-bet">
				  			<a class="index_ios" href="http://www.orunapp.com/dl/ios"></a>
				  			<a class="index_android" href="http://www.sportchina.org.cn/dl/android"></a>
				  			<span class="index_qr">
				  				<img class="index_qr-img" src="statics/images/orun3/qr_sys.png" />
				  			</span>
				  		</div>
				  	</div>
				  </div>
    		</div>    		
    	</div>
    	<div class="page page2">
    		<img class="bg" src="statics/images/orun3/indexBg2.png"/> 
    		<div class="pageCon">
    			<div class="pageTitle mt-50">
    				<p class="title">告别乏味</p>
    				<p class="titleDec">在这里不仅仅是跑步</p>
    			</div>
    			<div class="pageW">
    				<div class="flex-row space-bet">
	    				<div class="item">
	    					<div class="yuan">
	    						<img src="statics/images/orun3/icon_1.png"/>
	    					</div>
	    					<p class="itemTxt">趣味跑法</p>    					
	    				</div>
	    				<div class="item">
	    					<div class="yuan">
	    						<img src="statics/images/orun3/icon_2.png"/>
	    					</div>
	    					<p class="itemTxt">计步分享</p>
	    				</div>
	    				<div class="item">
	    					<div class="yuan">
	    						<img src="statics/images/orun3/icon_3.png"/>
	    					</div>
	    					<p class="itemTxt">精准记录</p>
	    				</div>
	    				<div class="item">
	    					<div class="yuan">
	    						<img src="statics/images/orun3/icon_4.png"/>
	    					</div>
	    					<p class="itemTxt">分享快乐</p>
	    				</div>
	    			</div>
    			</div>   			
    		</div>
    	</div>
    	<div class="page page3">
    		<img class="bg" src="statics/images/orun3/indexBg3.png"/>  
    		<div class="pageCon">
    			<div class="pageTitle mt-50">
    				<p class="title">在这里</p>
    				<p class="titleDec">你可以使用快乐跑</p>
    			</div>
    			<div class="pageW">
    				<div class="flex-row space-bet page3-scrolltop">
	    				<div id="animationSandbox1" class="item" style="opacity: 0">
	    					<img src="statics/images/orun3/page3_1.png"/>					
	    				</div>
	    				<div id="animationSandbox2" class="item" style="opacity: 0">
	    					<img src="statics/images/orun3/page3_2.png"/>	
	    				</div>
	    				<div id="animationSandbox3" class="item" style="opacity: 0">
	    					<img src="statics/images/orun3/page3_3.png"/>	
	    				</div>
	    				<div id="animationSandbox4" class="item" style="opacity: 0">
	    					<img src="statics/images/orun3/page3_4.png"/>	
	    				</div>
	    				<div id="animationSandbox5" class="item" style="opacity: 0">
	    					<img src="statics/images/orun3/page3_5.png"/>	
	    				</div>
	    			</div>
    			</div>
    		</div>
    	</div>
    	<div class="page page4">
    		<div class="pageTitle mt-50">
    			<p class="title">合作伙伴</p>
    			<p class="titleDec">遇见更好的自己</p>
    		</div>
    		<div class="pageW pageW_4">
    			<div class="flex-row flex-wrap partnerBox">
	    			<!--合作伙伴-->
	    		</div>
    		</div>
    		
    	</div>    	
    </div>
		<div class="footer">
			<img class="footLogo" src="statics/images/orun3/logo_foot.png" />
			<p class="footTxt">Copyright © 2015-2017 快乐跑（北京）体育科技有限公司 京ICP备17026469号</p>
		</div>
		<div style="display: none">
			<script>
				var _hmt = _hmt || [];
				(function() {
				  var hm = document.createElement("script");
				  hm.src = "https://hm.baidu.com/hm.js?967359526fca29be4d18e53fe242fbcc";
				  var s = document.getElementsByTagName("script")[0]; 
				  s.parentNode.insertBefore(hm, s);
				})();
			</script>
		</div>	
    <script src="statics/js/libs/swiper.min.js"></script>
    <script>    	    	
    	$(function(){
    		var flag = true;
    		// 头部导航条颜色
			changeHead();
			// 创建合作伙伴	
			creatPartner('partnerBox',14);

			
			$(document).scroll(function(){
				// 页面滚动，切换导航条
				changeHead();
				// 页面滚动，"在这里"五个list动画
				var top = $('.page3-scrolltop').offset().top - $(window).height()/2;
				if($(window).scrollTop()>top&&$(window).scrollTop()<(top+100)){
					if(flag){
						flag = false;
						testAnim('animationSandbox1', 'slideInUp');
						var a=setTimeout( _testAnim('animationSandbox2', 'slideInUp'), 300);
						var b=setTimeout( _testAnim('animationSandbox3', 'slideInUp'), 600);
						var c=setTimeout( _testAnim('animationSandbox4', 'slideInUp'), 900);
						var d=setTimeout( _testAnim('animationSandbox5', 'slideInUp'), 1200);
					}
					
				}			  	
			})
				
			//动画
			function testAnim(obj, x) {
				$('#'+obj).css('opacity', 1);
			    $('#'+obj).removeClass().addClass(x + ' animated'+' item').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){				    	
				    $(this).removeClass(x + ' animated');
				});
			};
			// 定时器调用的动画
			function _testAnim(obj, x){  
        		return function(){  
            		testAnim(obj, x);  
        		}  
    		}
				
			// 头部划入划出
    		$('.navItem a').hover(function(){
    			$(this).css('color', '#ff0000');
    		},function(){
    			changeHead()
    		})    		
    	})
    	function creatPartner(obj,num){
    		var str = '';
    		for(var i=1; i<(num+1); i++){
    			str += '<div class="item"><img src="statics/images/orun3/partner_'+i+'.png" /></div>'
    		}
    		$('.'+obj).html(str);
    	}
    	//头部样式
    	function changeHead() {
    		if($(window).scrollTop()>10){			  		
			  	$('nav').removeClass('transparent');
			  	$('.navbar-brand').css('background-image', 'url(statics/images/orun3/lgoo.png)');
			  	$('.navItem a').css('color', '#3b3b3b');
			  		
			  } else{
			  		
			  	$('nav').addClass('transparent');
			  	$('.navbar-brand').css('background-image', 'url(statics/images/orun3/lgooIndex.png)');
			  	$('.navItem a').css('color', '#fff');
			  }
    	}
    	//ban轮播
    	var awiper = new Swiper(".swiper-ban",{
				autoplay:2e3,
				effect:"fade",
				speed:2e3
			})
    </script>
  </body>
</html>